<template>
<div class="leo-top-bar">
    <DxTabs :tabs="tabs" @selectTab="selectTab" label="funcName"></DxTabs>
</div>
</template>

<script lang="ts">
import {
    Options,
    Vue
} from 'vue-class-component';

import {
    ITabItem,
    FuncObj
} from '../api/types';

import {
    generateTabs
} from '../api/mock';

@Options({
    name: 'topBar',
    components: {
    }
})
export default class extends Vue {
    tabs!: Array < FuncObj > ;

    created() {
        this.tabs = generateTabs();
        console.log(this.tabs)
    }

    mounted() {
        this.tabs = generateTabs();
        console.log(this.tabs)
    }

    /**
     * 选中模块
     */
    selectModule(index: number, func: FuncObj) {
        console.log('selectModule == ', func, "index==" + index);
    }

    selectTab() {}

}
</script>

<style lang="scss" scoped>
.leo-top-bar {
    display: flex;
    width: 100%;
    height: 80px;
    background: #4e84fe;
    align-items: center;
}
</style>
